<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginService, useRegisterService } from '../services/user'
import { useUserStore } from '../stores/user'

const userStore = useUserStore()

const router = useRouter()
const ruleFormRefL = ref()
const ruleFormRefR = ref()
const isRegister = ref(true)
const changeIsRegister = () => {
  isRegister.value = !isRegister.value
}
const ruleFormL = reactive({
  userid: '',
  password: '',
  keepRemember: false
})
const ruleFormR = reactive({
  userid: '',
  username: '',
  password: '',
  rePassword: ''
})
const rulesL = reactive({
  userid: [{ required: true, message: '请输入工号', trigger: 'blur' }],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
})

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入再次密码'))
  } else if (value !== ruleFormR.password) {
    callback(new Error('两次密码必须一致!'))
  } else {
    callback()
  }
}

const rulesR = reactive({
  userid: [{ required: true, message: '请输入工号', trigger: 'blur' }],
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ],
  rePassword: [
    {
      validator: validatePass,
      trigger: 'blur'
    }
  ]
})
// 提交表单
const onSubmit = async (formEl, type) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!')
      if (type === 'login') {
        console.log('🚀 ~ awaitformEl.validate ~ ruleFormL:', ruleFormL)
        const res = await useLoginService(ruleFormL)
        console.log('🚀 ~ awaitformEl.validate ~ res:', res)
        if (res.status === 200 && res.data.success) {
          userStore.clearUser()
          userStore.setUser({
            userid: res.data.userid,
            username: res.data.username
          })
          router.push('/main')
        } else {
          alert(res.data.message)
        }
      } else {
        const res = await useRegisterService(ruleFormR)
        console.log('🚀 ~ awaitformEl.validate ~ res:', res)
        if (res.status === 200 && res.data.success) {
          alert(res.data.message)
        } else {
          alert(res.data.message)
        }
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<template>
  <el-row class="user-row" v-if="isRegister">
    <el-col :span="8"> </el-col>
    <el-col :span="8" id="user-area">
      <el-form
        ref="ruleFormRefL"
        size="large"
        :model="ruleFormL"
        :rules="rulesL"
        autocomplete="off"
        class="user-form"
      >
        <el-form-item><h2 style="font-weight: bold">登录</h2></el-form-item>
        <el-form-item id="userid" prop="userid">
          <el-input
            v-model="ruleFormL.userid"
            :prefix-icon="User"
            style="width: 320px"
            placeholder="请输入工号"
          />
        </el-form-item>
        <el-form-item id="password" prop="password">
          <el-input
            v-model="ruleFormL.password"
            :prefix-icon="Lock"
            style="width: 320px"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-row style="display: flex; width: 320px; justify-content: space-between">
            <el-checkbox v-model="ruleFormL.keepRemember" label="记住我" size="large" />
            <div style="cursor: pointer">忘记密码</div>
          </el-row>
        </el-form-item>
        <el-form-item id="form-button">
          <el-button type="primary" style="width: 320px" @click="onSubmit(ruleFormRefL, 'login')"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item id="register" @click="changeIsRegister" style="cursor: pointer">
          注册 →
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="8"> </el-col>
  </el-row>
  <el-row class="user-row" v-if="!isRegister">
    <el-col :span="8"> </el-col>
    <el-col :span="8" id="user-area">
      <el-form
        ref="ruleFormRefR"
        size="large"
        :model="ruleFormR"
        :rules="rulesR"
        autocomplete="off"
        class="user-form"
      >
        <el-form-item><h2 style="font-weight: bold">注册</h2></el-form-item>
        <el-form-item id="username" prop="username">
          <el-input
            v-model="ruleFormR.username"
            :prefix-icon="User"
            style="width: 320px"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item id="userid" prop="userid">
          <el-input
            v-model="ruleFormR.userid"
            :prefix-icon="User"
            style="width: 320px"
            placeholder="请输入工号"
          />
        </el-form-item>
        <el-form-item id="password" prop="password">
          <el-input
            v-model="ruleFormR.password"
            :prefix-icon="Lock"
            style="width: 320px"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item prop="rePassword">
          <el-input
            v-model="ruleFormR.rePassword"
            :prefix-icon="Lock"
            style="width: 320px"
            type="password"
            placeholder="请再次输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item id="form-button">
          <el-button type="primary" style="width: 320px" @click="onSubmit(ruleFormRefR, 'register')"
            >注册</el-button
          >
        </el-form-item>
        <el-form-item id="register" @click="changeIsRegister" style="cursor: pointer">
          ← 返回
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="8"> </el-col>
  </el-row>
</template>

<style>
.user-row {
  height: 100vh;
}
#user-area {
  display: flex;
  justify-content: center;
  align-items: center;
}
#feature {
  display: flex;
  justify-content: space-between;
}
</style>
../services/user
